<template>
  <n-space justify="space-between">
    <n-menu
      v-model:value="activeKey"
      mode="horizontal"
      :options="menuOptions"
      class="headmenu"
    />
    <n-menu
      v-model:value="activeKey"
      mode="horizontal"
      :options="$store.state.user.is_login ? rightoptions : simpleoptions"
      class="headmenu"
    />
  </n-space>
</template>

<script>
import { defineComponent, h, ref } from "vue";
// import {  NMenu } from "naive-ui";

import { RouterLink } from "vue-router";
import { useStore } from "vuex";

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "home",
          },
        },
        { default: () => "Mirror^Mirror" }
      ),
    key: "home",
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "ArticlesListView",
          },
        },
        { default: () => "近期文章" }
      ),
    key: "articles",
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "EssayListView",
          },
        },
        { default: () => "近期动态" }
      ),
    key: "essays",
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "CollectionListView",
          },
        },
        { default: () => "合集" }
      ),
    key: "collections",
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "BadgeListView",
          },
        },
        { default: () => "标签" }
      ),
    key: "badges",
  },
];

const simpleoptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "UserLoginView",
          },
        },
        { default: () => "登录" }
      ),
    key: "userlogin",
  },
];

export default defineComponent({
  components: {},
  setup() {
    const store = useStore();
    const rightoptions = [
      {
        label: () =>
          h(
            "a",
            {},
            {
              default: () => store.state.user.userinfo.nickname,
            }
          ),
        key: "userspace",
        children: [
          {
            label: () =>
              h(
                RouterLink,
                {
                  to: {
                    name: "UserSpaceView",
                  },
                },
                { default: () => "杂物间" }
              ),
            key: "userspace",
          },
          {
            label: () =>
              h(
                RouterLink,
                {
                  to: {
                    name: "UserLoginView",
                  },
                  onClick() {
                    store.commit("logout");
                  },
                },
                { default: () => "退出" }
              ),
            key: "logout",
          },
        ],
      },
    ];

    return {
      activeKey: ref(null),
      menuOptions,
      rightoptions,
      simpleoptions,
    };
  },
});
</script>

<style scoped>
</style>
